<template>
  <div id="app">
    <swiper :options="swiperOption" ref="mySwiper" >
    <!-- slides -->
    <swiper-slide >
        <img src="../assets/images/swiper_01.png" width="100%"/>
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'Swiper',
  components:{
    swiper,
    swiperSlide,
  },
  data() {
      return {
        swiperOption: {
            autoplay: true,
            loop: true,
            delay: 3000,
            effect: "slide",
            navigation: {
              prevEl: ".swiper-button-prev",
              nextEl: ".swiper-button-next"
            }
        },
      }
    },
}
</script>
<style lang="stylus" scoped>
  #app
    margin: 0 auto;
    width: 60%;
</style>